<script setup>
import SwiperSlideone from '@/components/SwiperSlideone/index.vue'
import SwiperSlideTwo from '@/components/SwiperSlideTwo/index.vue'
import SwiperSlideTree from '@/components/SwiperSlideTree/index.vue'
import SwiperSlideFour from '@/components/SwiperSlideFour/index.vue'
import SwiperSlideFive from '@/components/SwiperSlideFive/index.vue'
import SwiperSlideOnDit from '@/components/SwiperSlideOnDit/index.vue'
import SwiperSlideCooperative from '@/components/SwiperSlideCooperative/index.vue'
import {ref,reactive, onMounted} from "vue"
import { Swiper, SwiperSlide} from 'swiper/vue'
import { Pagination,Virtual,Mousewheel } from 'swiper'
import useHeaderStore from '@/store/modules/useHeader'
import 'swiper/css'
import 'swiper/css/pagination'
import {gsap} from 'gsap'

console.log('gsap',gsap)

const headerStore = useHeaderStore()

const modules = [Pagination,Virtual,Mousewheel]
let allowTouchMove = ref<Boolean>(false)
let initAnimate = false
/* 滑动事件 */
let handlerSideChange = (swiper) => {
  console.log('当前索引',swiper.activeIndex);
  if(swiper.activeIndex == 1 && !initAnimate) {
    let t = gsap.timeline()
    t.set('.left-content',{x:'-150%'})
    t.to('.left-content',{x:0,delay:.5})

    let rightGridT = gsap.timeline()
    rightGridT.set('.right-grid',{y:'-150%'})
    rightGridT.to('.right-grid',{y:0,delay:.5})

    initAnimate = true
  }
  if(swiper.activeIndex == 0){
    headerStore.switchIsBlack(true)
  }else {
    headerStore.switchIsBlack(false)
  }
}



onMounted(() => {

})
// https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/info-right@2x.11bf71dc.png
</script>
<template>
  <div class="jc-home-page">
    <div class="jc-home-page-content">
     <Swiper
     id="jc-swiper"
     class="swiper"
     :slides-per-view="1"
     :mousewheel="true"
     :direction="'vertical'"
     :pagination="{clickable:true}"
     :modules="modules"
     :speed="1000"
     :allowTouchMove="allowTouchMove"
     @slideChange="handlerSideChange"
     >
      <Swiper-slide>
        <div class="swiper-banner">
          <SwiperSlideone></SwiperSlideone>
        </div>
      </Swiper-slide>
<!--      <Swiper-slide>-->
<!--        <SwiperSlideTwo></SwiperSlideTwo>-->
<!--      </Swiper-slide>-->
      <Swiper-slide>
        <SwiperSlideTree></SwiperSlideTree>
      </Swiper-slide>
       <Swiper-slide>
         <SwiperSlideOnDit></SwiperSlideOnDit>
       </Swiper-slide>
      <Swiper-slide>
        <SwiperSlideFour></SwiperSlideFour>
      </Swiper-slide>
       <Swiper-slide>
         <SwiperSlideFive></SwiperSlideFive>
       </Swiper-slide>
<!--       <Swiper-slide>-->
<!--         <SwiperSlideCooperative></SwiperSlideCooperative>-->
<!--       </Swiper-slide>-->
     </Swiper>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.jc-home-page {
  height: 100vh;
  // background-color: rgba(127, 255, 212, 0.81);
  .jc-home-page-content {
    width: 100%;
    height: 100%;
    .swiper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: 100%;
        overflow: hidden;
        height: 100%;
        margin: 0 auto;
      }
    }
  }
}

::v-deep #jc-swiper {
  .swiper-pagination-bullets {
    right: 30px !important;
  }
  .swiper-pagination-bullet {
    border: 2px solid transparent;
    opacity: .5;
    background: #8c8c8c;
    background-clip: content-box;
    margin: 15px auto;
  }

  .swiper-pagination-bullet-active {
      border-color: red;
      background: transparent;
  }
}

</style>
